<section [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div class="container mx-auto p-6 overflow-x-auto">
		<table class="w-full">
			<caption class="sr-only">Pricing plan comparison</caption>
			<thead>
				<tr>
					<th></th>
					<th scope="col">
						<h2 class="px-2 text-lg font-medium">Starter</h2>
						<p class="mb-3">
							<span
								class="text-2xl font-bold sm:text-4xl"
								[ngClass]="['text' + contrastInv]"
							>
								0€
							</span>
							<span class="font-medium" [ngClass]="['text' + plainInv]">/mo</span>
						</p>
					</th>
					<th scope="col">
						<h2 class="px-2 text-lg font-medium">Standard</h2>
						<p class="mb-3">
							<span
								class="text-2xl font-bold sm:text-4xl"
								[ngClass]="['text' + contrastInv]"
							>
								19€
							</span>
							<span class="font-medium" [ngClass]="['text' + plainInv]">/mo</span>
						</p>
					</th>
					<th scope="col">
						<h2 class="px-2 text-lg font-medium">Premium</h2>
						<p class="mb-3">
							<span
								class="text-2xl font-bold sm:text-4xl"
								[ngClass]="['text' + contrastInv]"
							>
								49€
							</span>
							<span class="font-medium" [ngClass]="['text' + plainInv]">/mo</span>
						</p>
					</th>
				</tr>
			</thead>
			<tbody class="space-y-6 text-center divide-y" [ngClass]="['divide' + neutral]">
				<tr>
					<th class="text-left" scope="row">
						<h3 class="py-3">Euismod</h3>
					</th>
					<td class="">
						<span class="block text-sm">1</span>
					</td>
					<td class="">
						<span class="block text-sm">10</span>
					</td>
					<td class="">
						<span class="block text-sm">100</span>
					</td>
				</tr>
				<tr>
					<th class="text-left" scope="row">
						<h3 class="py-3">Principes et</h3>
					</th>
					<td class="">
						<span class="block text-sm">0,5 GB</span>
					</td>
					<td class="">
						<span class="block text-sm">5 GB</span>
					</td>
					<td class="">
						<span class="block text-sm">500 GB</span>
					</td>
				</tr>
				<tr>
					<th class="text-left" scope="row">
						<h3 class="py-3">Et mel porro</h3>
					</th>
					<td class="">
						<svg
							class="w-5 h-5 mx-auto"
							[ngClass]="['text' + primary]"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							aria-label="Included in Free plan"
						>
							<path
								fill-rule="evenodd"
								d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
								clip-rule="evenodd"
							></path>
						</svg>
					</td>
					<td class="">
						<svg
							class="w-5 h-5 mx-auto"
							[ngClass]="['text' + primary]"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							aria-label="Included in Standard plan"
						>
							<path
								fill-rule="evenodd"
								d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
								clip-rule="evenodd"
							></path>
						</svg>
					</td>
					<td class="">
						<svg
							class="w-5 h-5 mx-auto"
							[ngClass]="['text' + primary]"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							aria-label="Included in Premium plan"
						>
							<path
								fill-rule="evenodd"
								d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
								clip-rule="evenodd"
							></path>
						</svg>
					</td>
				</tr>
				<tr>
					<th class="text-left" scope="row">
						<h3 class="py-3">Veniam suscipiantur</h3>
					</th>
					<td class="">
						<svg
							class="w-5 h-5 mx-auto"
							[ngClass]="['text' + plain]"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							aria-label="Not included in Free plan"
						>
							<path
								fill-rule="evenodd"
								d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
								clip-rule="evenodd"
							></path>
						</svg>
					</td>
					<td class="">
						<svg
							class="w-5 h-5 mx-auto"
							[ngClass]="['text' + primary]"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							aria-label="Included in Standard plan"
						>
							<path
								fill-rule="evenodd"
								d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
								clip-rule="evenodd"
							></path>
						</svg>
					</td>
					<td class="">
						<svg
							class="w-5 h-5 mx-auto"
							[ngClass]="['text' + primary]"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							aria-label="Included in Premium plan"
						>
							<path
								fill-rule="evenodd"
								d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
								clip-rule="evenodd"
							></path>
						</svg>
					</td>
				</tr>
				<tr>
					<th class="text-left" scope="row">
						<h3 class="py-3">Ornatus tacimates</h3>
					</th>
					<td class="">
						<svg
							class="w-5 h-5 mx-auto"
							[ngClass]="['text' + plain]"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							aria-label="Not included in Free plan"
						>
							<path
								fill-rule="evenodd"
								d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
								clip-rule="evenodd"
							></path>
						</svg>
					</td>
					<td class="">
						<svg
							class="w-5 h-5 mx-auto"
							[ngClass]="['text' + plain]"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							aria-label="Not included in Standard plan"
						>
							<path
								fill-rule="evenodd"
								d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
								clip-rule="evenodd"
							></path>
						</svg>
					</td>
					<td class="">
						<svg
							class="w-5 h-5 mx-auto"
							[ngClass]="['text' + primary]"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							aria-label="Included in Premium plan"
						>
							<path
								fill-rule="evenodd"
								d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
								clip-rule="evenodd"
							></path>
						</svg>
					</td>
				</tr>
				<tr>
					<th class="text-left" scope="row">
						<h3 class="py-3">Aliquam fastidii in mei</h3>
					</th>
					<td class="">
						<svg
							class="w-5 h-5 mx-auto"
							[ngClass]="['text' + plain]"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							aria-label="Not included in Free plan"
						>
							<path
								fill-rule="evenodd"
								d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
								clip-rule="evenodd"
							></path>
						</svg>
					</td>
					<td class="">
						<svg
							class="w-5 h-5 mx-auto"
							[ngClass]="['text' + plain]"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							aria-label="Not included in Standard plan"
						>
							<path
								fill-rule="evenodd"
								d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
								clip-rule="evenodd"
							></path>
						</svg>
					</td>
					<td class="">
						<svg
							class="w-5 h-5 mx-auto"
							[ngClass]="['text' + primary]"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							aria-label="Included in Premium plan"
						>
							<path
								fill-rule="evenodd"
								d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
								clip-rule="evenodd"
							></path>
						</svg>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</section>
